<template>
  <h4>计算属性</h4>
  <div>count: {{ count }} - <button @click="count++">btn</button></div>
  <div>doubleCount: {{ doubleCount }}</div>
  <ul>
    <li v-for="item in oddList" :key="item">{{ item }}</li>
  </ul>
</template>

<script setup>
import { ref, computed } from "vue";
const count = ref(1);
// computed是函数，可以直接调用
// 里面传入一个回调函数，并且有一个返回值
const doubleCount = computed(() => {
  return count.value * 2;
});

const list = ref([1, 2, 3, 4, 5, 6, 7]);
const oddList = computed(() => {
  return list.value.filter((item) => item % 2);
});
</script>

<!-- <script>
import { ref, computed } from "vue";

export default {
  setup() {
    const count = ref(1);
    // computed是函数，可以直接调用
    // 里面传入一个回调函数，并且有一个返回值
    const doubleCount = computed(() => {
      return count.value * 2;
    });

    const list = ref([1, 2, 3, 4, 5, 6, 7]);
    const oddList = computed(() => {
      return list.value.filter((item) => item % 2);
    });

    return {
      count,
      doubleCount,
      oddList,
    };
  },
};
</script> -->
